<script setup>
// 是否显示
import {reactive, ref} from "vue";
import {login, sendForgotPassCaptcha, sendSignInCaptcha} from "@/api/AuthApi.js";
import {ElLoading, ElMessage} from 'element-plus';

defineProps({
  isShow: {
    type: Object,
    required: true,
    default: {}
  }
});

const logInForm = reactive({});
const signInForm = reactive({
  user: reactive({})
});
const forgotPassForm = reactive({});
const sendCaptchaBtnValue = ref('发送验证码');
const sendCaptchaBtnDis = ref(false);

function logIn() {
  if (logInForm.account === '' || logInForm.password === '') {
    ElMessage({
      message: '请输入账号或者密码！',
      type: 'warning'
    });
    return
  }
  const loading = ElLoading.service({
    lock: true,
    text: '登录中...',
    background: 'rgba(0, 0, 0, 0.7)',
  });
  login(logInForm.account, logInForm.password).then(resp=>{
    if(resp.code===1) {
      console.log("登录成功！！！");
      location.reload();
    } else {
      console.log("登录失败！！！");
      ElMessage({
        message: '登录失败！',
        type: 'warning'
      });
    }
    loading.close();
  }).catch(err=>{
    console.log("登录失败！");
    console.log(err);
    loading.close();
    ElMessage({
      message: '登录失败！',
      type: 'warning'
    });
  });
}
// 发送注册验证码
function signInCaptcha(email) {
  if (email === '') {
    ElMessage({
      message: '请输入电子邮箱！',
      type: 'warning'
    });
    return;
  }
  sendCaptchaBtnDis.value = true;//禁用按钮
  sendSignInCaptcha(email).then(resp=>{
    var x = 60;
    var timeOutId = setInterval(()=>{
      sendCaptchaBtnValue.value = x+'s';
      x--;
      if (x === 0) {
        sendCaptchaBtnValue.value = '发送验证码';
        sendCaptchaBtnDis.value = false;//解禁
        clearInterval(timeOutId);
      }
    },1000);
    ElMessage({
      message: '验证码已发送，请注意查看。',
      type: 'success'
    });
  }).catch(resp=>{
    ElMessage({
      message: '电子邮箱不存在或者有误，请重新输入！',
      type: 'warning'
    });
    sendCaptchaBtnDis.value = false;//解禁
  })
}
// 发送忘记密码验证码
function forgotPassCaptcha(email) {
  if (email === '') {
    ElMessage({
      message: '请输入电子邮箱！',
      type: 'warning'
    });
    return;
  }
  sendCaptchaBtnDis.value = true;//禁用按钮
  sendForgotPassCaptcha(email).then(resp=>{
    var x = 60;
    var timeOutId = setInterval(()=>{
      sendCaptchaBtnValue.value = x+'s';
      x--;
      if (x === 0) {
        sendCaptchaBtnValue.value = '发送验证码';
        sendCaptchaBtnDis.value = false;//解禁
        clearInterval(timeOutId);
      }
    },1000);
    ElMessage({
      message: '验证码已发送，请注意查看。',
      type: 'success'
    });
  }).catch(resp=>{
    ElMessage({
      message: '电子邮箱不存在或者有误，请重新输入！',
      type: 'warning'
    });
    sendCaptchaBtnDis.value = false;//解禁
  })
}

</script>
<template>
  <!-- 登录注册框 -->
  <el-dialog class="registerDialog" title="登录注册"
             v-model="isShow.registerDialog" :draggable="true" :modal="false"
             align-center>
    <!-- 登录 -->
    <div class="logInDialog" v-show="isShow.logInDialog">
      <el-form>
        <el-form-item>
          <div style="width: 80px;">账号：</div><el-input class="input" placeholder="账号或电子邮箱" v-model="logInForm.account"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="width: 80px;">密码：</div><el-input class="input" type="password" v-model="logInForm.password"></el-input>
        </el-form-item>
      </el-form>
      <br><br><br>
      <div style="float: left;" @click="isShow.logInDialog=false;isShow.forgotPassDialog=true">忘记密码</div>
      <div style="float: left;">&ensp;或&ensp;</div>
      <div style="float: left;" @click="isShow.logInDialog=false;isShow.signInDialog=true">注册</div>
      <el-button style="float: right;" @click="logIn">登录</el-button>
    </div>
    <!-- 注册 -->
    <div class="signInDialog" v-show="isShow.signInDialog">
      <el-form :model="signInForm">
        <el-form-item>
          <div style="width: 80px;">用户名：</div><el-input class="input" v-model="signInForm.user.username" placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <div style="width: 80px;">电子邮箱：</div><el-input class="input" v-model="signInForm.user.email" placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <div style="width: 80px;">验证码：</div>
          <el-input v-model="signInForm.captcha" placeholder="" style="float: right; width: 200px;"></el-input>
          <el-button @click="signInCaptcha(signInForm.user.email)" :disabled="sendCaptchaBtnDis" style="width: 100px; margin-left: 20px;">{{sendCaptchaBtnValue}}</el-button>
        </el-form-item>
        <el-form-item>
          <div style="width: 80px;">密码：</div><el-input class="input" v-model="signInForm.password1" placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <div style="width: 80px;">确认密码：</div><el-input class="input" v-model="signInForm.password2" placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <div style="float: left;">拥有账号？</div>
      <div style="float: left;" @click="isShow.signInDialog=false;isShow.logInDialog=true">登录</div>
      <el-button style="float: right;" @click="signIn">注册</el-button>
    </div>
    <!-- 忘记密码 -->
    <div class="forgotPassDialog" v-show="isShow.forgotPassDialog">
      <el-form :model="forgotPassForm">
        <el-form-item>
          <div style="width: 80px;">电子邮箱：</div><el-input class="input" v-model="forgotPassForm.email" placeholder="Please input"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="width: 80px;">验证码：</div>
          <el-input v-model="forgotPassForm.captcha" placeholder="" style="float: right; width: 200px;"></el-input>
          <el-button @click="forgotPassCaptcha(forgotPassForm.email)" :disabled="sendCaptchaBtnDis" style="width: 100px; margin-left: 20px;">{{sendCaptchaBtnValue}}</el-button>
        </el-form-item>
        <el-form-item>
          <div style="width: 80px;">新密码：</div><el-input class="input" v-model="forgotPassForm.password1" placeholder="Please input"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="width: 80px;">确认密码：</div><el-input class="input" v-model="forgotPassForm.password2" placeholder="Please input"></el-input>
        </el-form-item>
      </el-form>
      <div style="float: left;" @click="isShow.forgotPassDialog=false;isShow.logInDialog=true">去登录</div>
      <el-button style="float: right;" @click="forgotPass">忘记密码</el-button>
    </div>
  </el-dialog>
</template>
<style scoped>
/*
-webkit-background-clip: text;将设置的背景颜色限制在文字中
-webkit-text-fill-color: transparent;给文字设置成透明
*/
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  /* overflow-y: hidden; */
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.el-drawer__body {
  padding: 0 !important;
}

.logInDialog, .signInDialog, .forgotPassDialog {
  position: fixed !important;
  left: 50px !important;
  width: 400px !important;
  margin: 0 auto !important;
}

.el-form-item .input {
  float: right !important;
  width: 320px !important;
}

.myCenterBtn {
  user-select: none;
  width: 100px;
  height: 40px;
  margin: 0;
}

.myCenterBtn:hover {
  color: var(--subject-color);
}


.topUpOptions {
  background-color: white;
  width: 100px;
  height: 60px;
  border: 1px #C6E2FF solid;
  border-radius: 10px;
  margin: 7px;
  float: left;
  text-align: center;
  line-height: 30px;
}
.topUpOptions:hover {
  background-color: #ECF5FF;
}
.topUpOptions:active {
  border: 1px #409EFF solid;
}

</style>
